<div>
    <x-header>
        @include('partials.category')
    </x-header>

    @if($collection->isEmpty())
        @include('partials.oops')
    @else
        <div class="grid grid-cols-3 gap-2 px-2 text-sm py-4">
            @foreach($collection as $v)
                <div class="text-center" wire:key="{{ $v->id }}">
                    <a href="{{ $v->presenter()->show }}">
                        <img class="w-full aspect-square object-cover object-center rounded" src="{{ file_url($v->picture) }}" alt="{{ $v->title }}">

                        <p class="py-2 truncate">{{ $v->title }}</p>
                    </a>
                </div>
            @endforeach
        </div>

        @includeWhen($hasMorePages, 'partials.load-more')
    @endif
</div>
